<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>

<script src="../js/vue.js"></script>
<div id="app">
  <!--父组件的数据，当作属性传递给子组件-->
  <cpn  :cmessage="message" :cmoives="movies"></cpn>
</div>

<!--发现一个坑，模板里面一定只有一个最大的块级元素包起来-->
<template id="cpn">
  <div>
    <ul>
      <li v-for="item in cmoives">{{item}}</li>
    </ul>
    <h2>{{cmessage}}</h2>
  </div>

</template>

<script>
  const cpn = {
    template: `#cpn`,
    //子组件用 props 接受父组件传递来的数据（数组写法->不太友好，看起来是个字符串，其实是个对象）
    // props:['cmoives','cmessage'],
    props: {
      //1.类型限制
      /*   cmoives:Array,
         cmessage:String*/

      //2.提供一些默认值，以及必传值
      cmessage: {
        type: String,
        //如果父组件不穿这个属性，就给他一个默认值
        default: 'aaaaa',
        //必传
        required: true
      },
      cmoives:{
        type:Array,
        //如果类型是对象或者数组时，默认值必须是一个方法，不然会报错
        default(){
          return []
        }
        // required: true
      }
    },
    data() {
      return {}
    },
    methods: {}


  }
  const app = new Vue({
    el: '#app',
    data: {
      message: "第一次，系统的学VUE",
      movies: ['海王', '海尔兄弟', '海贼王']
    },
    components: {
      //'cpn':cpn
      //对象字面量增强写法
      cpn
    }
  })
</script>
</body>
</html>